import { createRouter, createWebHistory } from 'vue-router'
import TaskList from '../views/TaskList.vue'
import TaskDetail from '../components/TaskDetail.vue'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Contact from '../views/Contact.vue'
import NestedRoute from '../views/NestedRoute.vue'
import NestedRoute1 from '../views/NestedRoute1.vue'
import NestedRoute2 from '../views/NestedRoute2.vue'

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/about',
        name: 'About',
        component: About
    },
    {
        path: '/contact',
        name: 'Contact',
        component: Contact
    },
    {
        path: '/task',
        name: 'TaskList',
        component: TaskList
    },
    {
        path: '/task/:id',
        name: 'TaskDetail',
        component: TaskDetail
    },
    {
        path: '/nested',
        name: 'NestedRoute',
        component: NestedRoute,
        // 二级路由
        children: [
            {
                path: 'nested1',
                name: 'NestedRoute1',
                component: NestedRoute1
            },
            {
                path: 'nested2',
                name: 'NestedRoute2',
                component: NestedRoute2
            }
        ]
    }
]

// 纽带的作用，连接了应用程序中的不同页面，并提供了前端路由的功能。
const router = createRouter({
    history: createWebHistory(),
    routes
})

export default router
